<template>
	<view>
		<view class="head">
			<!-- 头部 -->
			<view class="search-box">
				<!-- 输入框 -->
				<view class="search-box1">
					<u-search placeholder="请输入小区或商圈名开始搜"
					 v-model="keyword"
					 shape="square"
					 ></u-search>
				</view>
				<view class="search-box2">
					<u-icon name="home" size="36rpx" @click="route"></u-icon>
				</view>
			</view>
			<view class="select">
				<!-- 下拉菜单 -->
				<u-dropdown>
					<u-dropdown-item v-model="value1" title="区域" :options="options1"></u-dropdown-item>
					<u-dropdown-item v-model="value2" title="价格" :options="options2"></u-dropdown-item>
					<u-dropdown-item v-model="value3" title="房型" :options="options3"></u-dropdown-item>
					<u-dropdown-item v-model="value4" title="更多" :options="options4"></u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		<view class="box">
			<house-list1></house-list1>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 输入框
				keyword: '',
				// 下拉框
				value1: 1,
				value2: 2,
				value3: 3,
				value4: 4,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				options3: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				options4: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				
			}
		},
		methods: {
			route(){
				// uni.r
			}
		}
	}
</script>

<style lang="scss">
	.head {
		height: 100rpx;
		box-shadow:  0 2rpx 0rpx 0 #999;
		line-height:100rpx ;
	}
	
	.box {
		width: 85%;
		margin: 100rpx auto;
	}
	
	.search-box {
		display: flex;
		width: 100%;
		background-color: rgba(251, 156, 0, 100);
		color: rgba(255, 255, 255, 100);
		
		.search-box1 {
			width: 170%;
			margin-right: 30rpx;
			margin-left: 40rpx;
		}
		.search-box2 {
			margin-right: 30rpx;
		}
	}
	.select {
		// margin-bottom: 30rpx;
	}
</style>
